<template>
	<yd-layout id='myOrder' class=''>
		<ul class="nav" slot='top'>
			<li @click="navClick(-1)" :class="navNum==-1?'active_nav':''">
				<div>全部</div>
				<span></span>
			</li>
			<li @click="navClick(0)" :class="navNum==0?'active_nav':''">
				<div>未付款</div>
				<span></span>
			</li>
			<li @click="navClick(1)" :class="navNum==1?'active_nav':''">
				<div>待发货</div>
				<span></span>
			</li>
			<li @click="navClick(2)" :class="navNum==2?'active_nav':''">
				<div>已发货</div>
				<span></span>
			</li>
			<li @click="navClick(3)" :class="navNum==3?'active_nav':''">
				<div>已完成</div>
				<span></span>
			</li>
		</ul>
		<div class="content">
			<div class="article_list_f">
				<yd-infinitescroll v-show='orderList.length>0' :callback="getOrderList" ref="infinitescrollDemo">
					<div slot="list" class="order_list" v-for="item in orderList">
						<div class="oredr_list_top">
							<div class="order_num">订单号：{{item.sn}}</div>
							<div class="order_time">{{item.newTime}}</div>
						</div>
						<div class="goods_list" v-for="i in item.items">
							<img class="goods_list_img" :src="i.title_img" alt="" />
							<div class="goods_list_right">
								<div class="goods_list_name c_text_ellipsis_2">{{i.goods_name}}</div>
								<div class="goods_list_label">共{{i.number}}件，小计￥{{i.price_total}}</div>
							</div>
						</div>
						<div class="order_list_btn_f">
							<div class="order_list_all">共{{item.item_count}}件，合计￥{{item.price_total}}</div>
							<div v-if='item.status==0' class="order_list_btn" @click="goStoreOrder(item)">去付款</div>
							<div v-else-if="item.status==1" class="order_list_btn order_list_btn_1" @click="noSendGoods(item)">待发货</div>
							<div v-else-if="item.status==2||item.status==3" class="order_list_btn order_list_btn_1" @click="openWuliu(item)">查看物流</div>
							<!--<div v-else-if="item.status==3" class="order_list_btn_2">已完成</div>-->
						</div>
					</div>
					<!-- 数据全部加载完毕显示 -->
					<span slot="doneTip">没有更多数据了~~</span>

					<!-- 加载中提示，不指定，将显示默认加载中图标 -->
					<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
				</yd-infinitescroll>
				<NoList v-show='orderList.length==0'>
					<img slot='img' src="../../assets/kong_3.png" alt="" />
				</NoList>
			</div>

		</div>
		 <yd-backtop></yd-backtop>
		 
		 <yd-popup v-model="wuliuShow" position="center" width="100%" :close-on-masker='false'>
	        <div class="wuliu_pop_f">
	        	<div class="wuliu_pop" >
	            	<div class="wuliu_name">订单跟踪（{{wuliuObj.expName}}&nbsp;{{wuliuObj.number}}）</div>
	            	<div class="wuliu_status">
	            		<div class="status_left">
	            			<img src="../../assets/myOrder_1.png" alt="" />
	            			<span></span>
	            		</div>
	            		<div class="status_right">
	            			<div class="status_name">{{wuliuObj.issign==0?'未完成':'已签收'}}</div>
	            			<div class="status_time">{{wuliuObj.updateTime}}</div>
	            		</div>
	            	</div>
	            	<div class="addr_list" v-for="item in wuliuList">
	            		<div class="addr_list_left">
	            			<div class="addr_list_left_dian">
	            				<img src="../../assets/myOrder_2.png" alt="" />
	            			</div>
	            			<span></span>
	            		</div>
	            		<div class="addr_list_right">
	            			<div  class="addr_list_name">{{item.status}}</div>
	            			<div class="addr_list_time">{{item.time}}</div>
	            		</div>
	            	</div>
	            </div> 
	        </div>
            <img @click="wuliuShow=false" class="pop_close_img" src="../../assets/close_1.png" alt="" />
        </yd-popup>
	</yd-layout>
</template>

<script>
	import { BackTop } from 'vue-ydui/dist/lib.rem/backtop';
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	export default {
		components: {
			[BackTop.name]: BackTop,
			[InfiniteScroll.name]: InfiniteScroll,
			[Popup.name]: Popup,
		},
		data() {
			return {
				navNum: -1,
				orderList: [],
				pageNum: 1,
				wuliuShow:false,
				wuliuObj:{},
				wuliuList:[],
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			document.title = '我的订单'
			this.getOrderList();
			
		},
		methods: {
			//打开物流
			openWuliu(item){
				this.wuliuShow=true;
				this.$root.ajax({
					name: 'mall/express',
					closeDia:true,
					errormsg:true,
					params: {
						order_no: '3555860266322',
						order_no: item.express_id
					},
				}).then((d) => {
					if(d.msg == 'ok'){
						this.wuliuObj = d.result
						console.log(this.wuliuObj)
						this.wuliuList = d.result.list
					}else{
						this.$dialog.toast({
							mes: `${d.msg}`,
							timeout: 1500
						});
					}
						
				})
			},
			//待发货
			noSendGoods(){
				this.$dialog.toast({
					mes: `正在抓紧打包快递，请耐心等待`,
					timeout: 1500
				});
			},
			//去付款
			goStoreOrder(item){
				this.$router.push({
					name:'storeOrder',
					query:{
						id:item.id
					}
				})
			},
			getOrderList() {
				this.$root.ajax({
					name: 'mall/order/lst',
					params: {
						status: this.navNum,
						page: this.pageNum,
						count: 10,
					},
				}).then((d) => {
					for(let a = 0; a < d.data.order_list.length; a++) {
						d.data.order_list[a].newTime = this.$root.getDate(new Date(d.data.order_list[a].create_time * 1000))
						d.data.order_list[a].price_total = this.$root.setMoneyZero(d.data.order_list[a],'price_total')
//						d.data.order_list[a].items = d.data.order_list[a].items.slice(0,2)
						for(let b=0;b<d.data.order_list[a].items.length;b++){
							d.data.order_list[a].items[b].price_total = this.$root.setMoneyZero(d.data.order_list[a].items[b],'price_total')
						}
					}
					this.orderList = [...this.orderList, ...d.data.order_list];
					if(this.orderList.length >= d.data.order_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum++;
				})
			},
			navClick(num) {
				this.navNum = num;
				this.pageNum = 1;
				this.orderList = [] ;
				this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
				this.getOrderList()
			}
		}
	}
</script>

<style lang="scss">
	@import './myOrder.scss';
</style>